<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层叠性</title>
	<style type="text/css">
		/*1  0  0*/
		#box{
			color: red;
		}
		/*0  1  0*/
		.container{
			color: yellow;
		}
		/*0  0  1*/
		p{
			color: purple;
		}
	</style>
</head>
<body>
	
	<!-- 
		层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
		权重： 谁的权重大，浏览器就会显示谁的属性
		
		谁的权重大？  非常简单   数数
				
		id的数量  class的数量  标签的数量


	 -->
	<p id="box" class="container">
		猜猜我是什么颜色
	</p>
</body>
</html>